<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>日志搜索</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" th:href="@{/static/images/favicon.ico}" type="image/x-icon">
    <link rel="stylesheet" th:href="@{/static/lib/layui/css/layui.css}" media="all"/>
    <style>
        .highLight{
            background-color: yellow;
        }

    </style>
</head>

<body>

    <div style="padding: 20px;">
        <blockquote class="layui-elem-quote">
            <form class="layui-form layui-form-pane" id="search-form">

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">业务系统</label>
                        <div class="layui-input-block">
                            <select name="appId" lay-filter="appId" id="app_list">
                               <!-- <option value="8e3bf145813448cb9bed0c7b4422a4e4" selected="">qtrade-bond</option>
                                <option value="1e3bf145813448cb9bed0c7b4422a4e4">qtrade-erp</option>
                                <option value="3">qtrade-activity</option>-->
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">日志行数</label>
                        <div class="layui-input-block">
                            <select name="lines" lay-filter="aihao">
                                <option value="100" selected="">100</option>
                                <option value="200">200</option>
                                <option value="500">500</option>
                                <option value="1000">1000</option>
                                <option value="2000">2000</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">关键字</label>
                    <div class="layui-input-block">
                        <input id="keyword" type="text" name="keyword" placeholder="请输入关键字" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">日志路径</label>
                    <div class="layui-input-block">
                        <input id="path" type="text" name="path" placeholder="请输入日志路径" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">脚本命令</label>
                    <div class="layui-input-block">
                        <input id="extendCommand" type="text" name="extendCommand" placeholder="脚本命令，如： -h 输出不带文件名，-C 10 输出匹配行和它前后10行， -A 10 输出匹配行后和它后面的10行， -B 10 输出匹配行和它前面的10行)" class="layui-input">
                    </div>
                </div>
                <button style="width: 108px;" type="button" class="layui-btn layui-btn-radius" id="search">搜索</button>
            </form>
        </blockquote>
    </div>

    <div style="padding: 0px 20px 20px 20px;" id="logdiv">
        <!--<fieldset class="layui-elem-field layui-field-title">
            <legend>日志搜索结果</legend>
        </fieldset>
        <div class="layui-collapse" lay-filter="test">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
                <div class="layui-colla-content layui-show">
                    <p>有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊</p>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
                <div class="layui-colla-content layui-show">
                    <p>因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo</p>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">layui 更适合哪些开发者？</h2>
                <div class="layui-colla-content layui-show">
                    <p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
                        <br><br>
                        因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">贤心是男是女？</h2>
                <div class="layui-colla-content layui-show">
                    <p>man！ 所以这个问题不要再出现了。。。</p>
                </div>
            </div>
        </div>-->
    </div>




    <script th:src="@{/static/lib/layui/layui.js}"></script>
    <script th:src="@{/static/lib/template-web.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        contextPath = /*[[@{/}]]*/ '';
        /*]]>*/
    </script>
    <script>
        String.prototype.format = function () {
            var values = arguments;
            return this.replace(/\{(\d+)\}/g, function (match, index) {
                if (values.length > index) {
                    return values[index];
                } else {
                    return "";
                }
            });
        };

        var apps = [];
        //一般直接写在一个js文件中
        layui.use(['layer', 'form', 'jquery', 'element'], function(){
            var layer = layui.layer;
            var $ = layui.jquery;
            var element = layui.element;
            var form = layui.form;

            $(function(){
                $.ajax({
                    type: "POST",
                    url: contextPath + "api/search/get_apps.do",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function(response){
                        apps = response.data.apps;
                        if(apps.length==0){
                            $('#app_list').append('<option value="" selected="">无数据</option>');
                        } else {
                            initData(apps);
                        }
                        form.render();
                    }
                });
            });

            form.on('select(appId)', function(data){
                for(var i=0; i<apps.length; i++){
                    if(apps[i].appId===data.value){
                        $('#path').val(apps[i].logPath);
                    }
                }
            })


            $("#search").on("click", function(){
                var index = layer.msg('查询中...', {icon: 16,shade: 0.5});
                $.ajax({
                    type: "POST",
                    url: contextPath + "api/search/get_log.do",
                    data: form2JsonString('search-form'),
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function(response){
                        renderLogView(response);
                    },
                    complete: function(request, status){
                        layer.close(search);
                    }
                });
            });

            function renderLogView(response) {
                var logHtml = template('logBoxTemplate', response);
                $('#logdiv').html(logHtml);
                element.render('#logdiv');
            }

            function form2JsonString(formId) {
                var paramArray = $('#' + formId).serializeArray();
                var jsonObj={};
                $(paramArray).each(function(){
                    jsonObj[this.name]=this.value;
                });
                // json对象再转换成json字符串
                return JSON.stringify(jsonObj);
            }

            function initData(apps) {
                var option = '<option value="{0}" {1}>{2}</option>';
                var optionHtml = '';
                for(var i=0; i<apps.length; i++){
                    if(i==0){
                        optionHtml += option.format(apps[i].appId, 'selected=""', apps[i].appName);
                        $('#path').val(apps[i].logPath);
                    } else {
                        optionHtml += option.format(apps[i].appId, '', apps[i].appName);
                    }
                }
                $('#app_list').append(optionHtml);
            }

        });

    </script>

    <script id="logBoxTemplate" type="text/html">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>日志搜索结果</legend>
        </fieldset>
        <div class="layui-collapse" lay-filter="test">
            {{each data as instance i}}
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">{{instance.instanceName}}</h2>
                <div class="layui-colla-content layui-show">
                    {{each instance.logList as log j}}
                    <p>{{@log}}</p>
                    {{/each}}
                </div>
            </div>
            {{/each}}
        </div>
    </script>
</body>
</html>